<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <meta content="yes" name="mobile-web-app-capable">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <title>报表生成-缴费明细表(2017年3月15日15:37:53已废弃)</title>
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../css/tableInfo.css" />
    <link rel="stylesheet" href="../css/statisticalAanalysis.css" />
    <link rel="stylesheet" href="../css/queryReportList.css" />
    <link rel="stylesheet" href="../css/commonScreen.css" />
    <style type="text/css">
        #copyright {
            position: relative;
            margin-top:3.3892rem;
        }
    </style>
</head>
<body>
<div id="tableManage"></div>
<script type="text/javascript" src="../js/common.js" ></script>
<script type="text/javascript">
    $(window).resize(function(){
//        $(".studentsInfo-data-table").css("maxHeight",$(document.body).height()-260+"px");//直接用jquery
    });
</script>
<script type="text/babel">
    var currentpage = 1,totlepage = 1,i;//分页的当前页和总的页数
    //自定义报表数据
    var tableData = [];
    //报表对应的数据
    var otherData = {tableName:'',pageLeft:0,pageRight:1};
    var Page = React.createClass({
        render: function () {
            {
                var items = [],
                    svar = this;
                var onPageClickArray = [this.onPageClick];
                if(totlepage < 6){
                    for(i = 1;i <= totlepage ;i++) {
                        if (i == currentpage) {
                            items.push({num:i,checked:true})
                        } else {
                            items.push({num:i,checked:false})
                        }
                    }
                }else if(currentpage >= (totlepage-2)) {//点在左边
                    items.push({num:1,checked:false});
                    items.push({num:'···',checked:false});
                    for(i = totlepage-2;i <= totlepage ;i++){
                        if(i == currentpage){
                            items.push({num:i,checked:true})
                        }else{
                            items.push({num:i,checked:false})
                        }
                    }
                }else if(currentpage <= 3){
                    for(i = 1;i <= 3 ;i++) {
                        if (i == currentpage) {
                            items.push({num:i,checked:true})
                        } else {
                            items.push({num:i,checked:false})
                        }
                    }
                    items.push({num:'···',checked:false});
                    items.push({num:totlepage,checked:false})
                }else {//点在两边
                    items.push({num:1,checked:false});
                    items.push({num:'···',checked:false});
                    items.push({num:currentpage-1,checked:false});
                    items.push({num:currentpage,checked:true});
                    items.push({num:currentpage+1,checked:false});
                    items.push({num:'···',checked:false});
                    items.push({num:totlepage,checked:false})
                }
            }
            return (
                    <div className="tableInfo-page">
                        <div className="page-number">每页15条</div>
                        <div className="page-limit">
                            <ol className="page-limit-ol">
                                <ol className="page-limit-ol">
                                    <li className="page-limit-img" name="-1" onClick={otherData.pageLeft == 0?'':svar.props.onPageClick.bind(svar,-1)}><span className={otherData.pageLeft == 0?'page-limit-left-no':'page-limit-left-yes'}></span></li>
                                    {
                                        items.map(function (item) {
                                            return (<li onClick={isNaN(item.num)?'':svar.props.onPageClick.bind(svar,item.num)}  className={item.checked == true?'page-limit-num page-limit-checked':'page-limit-num'} name={item.num}>{item.num}</li>)
                                        })
                                    }
                                    <li className="page-limit-img" name="-2" onClick={otherData.pageRight == 0?'':svar.props.onPageClick.bind(svar,-2)}><span className={otherData.pageRight == 0?'page-limit-right-no':'page-limit-right-yes'}></span></li>
                                </ol>
                            </ol>
                        </div>
                    </div>
            );
        },
    });
    //表单组件
    var Table = React.createClass({
        render: function () {
            return (
                    <tr>
                        <td>{this.props.schoolname}</td>
                        <td >{this.props.studentname}</td>
                        <td >{this.props.simid}</td>
                        <td>{this.props.mdtid}</td>
                        <td >{this.props.devicetype}</td>
                        <td >{this.props.factory}</td>
                        <td >{this.props.teachertel}</td>
                        <td >{this.props.parenttel}</td>
                        <td >{this.props.starttime}</td>
                        <td >{this.props.endtime}</td>
                        <td >{this.props.updatetime}</td>
                        <td >{this.props.fee}</td>
                        <td >{this.props.fee2}</td>
                        <td >{this.props.paystatus}</td>
                    </tr>
            );
        }
    });
    //父组件
    var Main = React.createClass({
        //组件初始状态
        getInitialState: function () {
            return {otherData:this.props.otherData,tableData:this.props.tableData}
        },
        componentDidMount: function () {
            //使用ajax取出数据然后组装数据列表
            $.ajax({
                url:serverUrl+'/reportController/queryReportList.json?param={pagenumber:1,pagecount:15}',
                dataType:'json',
                success:function (data) {
                    if(data.info.queryresult != null){
                        for(var i=0;i<data.info.queryresult.length;i++){
                            var obj=data.info.queryresult[i];
                            var paystatus = obj.paystatus;
                            tableData[i] = {key:i,schoolname:obj.schoolname,studentname:obj.studentname,simid:obj.simid,mdtid:obj.mdtid,devicetype:obj.devicetype,factory:obj.factory,teachertel:obj.teachertel,parenttel:obj.parenttel,starttime:obj.starttime,endtime:obj.endtime,updatetime:obj.updatetime,fee:obj.fee,fee2:obj.fee2 ,paystatus:paystatus};
                        }
                        var pageRight = 0;
                        if(data.info.totlepage > 1){
                            pageRight = 1
                        }
                        otherData = {pageLeft:0,pageRight:pageRight};
                        currentpage = 1,totlepage = data.info.totlepage;//初始化的时候赋值：分页的当前页和总的页数
                        this.setState({tableData:tableData,otherData:otherData});
                    }else{
                        otherData = {maxHeight:height,pageLeft:0,pageRight:0};
                        currentpage = 1,totlepage = 1;//初始化的时候赋值：分页的当前页和总的页数
                        this.setState({tableData:tableData,otherData:otherData});
                    }
                }.bind(this)
            });

        },
        //分页
        onPageClick: function (num) {
            //分页-调用ajac然后把数据查询出来:获取name的值
            //计算currentpage
            var onPageLeft = 0,onPageRight = 1;
            if(num > 0){
                currentpage = num;
            }else if(num == -1 && currentpage > 1){
                currentpage --;
            }else if(num == -2  && currentpage < totlepage){
                currentpage ++;
            }
            //修改左右的按钮
            if(currentpage == totlepage && totlepage == 1){
                onPageLeft = 0;
                onPageRight = 0;
            }else if(currentpage == totlepage && totlepage > 1){
                onPageLeft = 1;
                onPageRight = 0;
            }else if(1 < currentpage && currentpage < totlepage){
                onPageLeft = 1,onPageRight = 1;
            }
            var param="param={";
            param = getJsonDataNotEmpty(param,"pagenumber",""+currentpage+"");
            param = getJsonDataNotEmpty(param,"pagecount",'15');
            param += "}";
            $.ajax({
                url:serverUrl+'/reportController/queryReportList.json',
                data: param,
                dataType:'json',
                success:function (data) {
                    if(data.info.queryresult != null){
                        for(var i=0;i<data.info.queryresult.length;i++){
                            var obj=data.info.queryresult[i];
                            var paystatus = obj.paystatus;
                            tableData[i] = {key:i,schoolname:obj.schoolname,studentname:obj.studentname,simid:obj.simid,mdtid:obj.mdtid,devicetype:obj.devicetype,factory:obj.factory,teachertel:obj.teachertel,parenttel:obj.parenttel,starttime:obj.starttime,endtime:obj.endtime,updatetime:obj.updatetime,fee:obj.fee,fee2:obj.fee2 ,paystatus:paystatus};
                        }
                        var pageRight = 0;
                        if(data.info.totlepage > 1){
                            pageRight = 1
                        }
                        otherData = {pageLeft:onPageLeft,pageRight:onPageRight};
                        currentpage = currentpage,totlepage = data.info.totlepage;//初始化的时候赋值：分页的当前页和总的页数
                        this.setState({tableData:tableData,otherData:otherData});
                    }else{
                        otherData = {maxHeight:height,pageLeft:0,pageRight:0};
                        currentpage = 1,totlepage = 1;//初始化的时候赋值：分页的当前页和总的页数
                        this.setState({tableData:tableData,otherData:otherData});
                    }
                }.bind(this)
            });
        },
        //导出excel
        onClickExport: function () {
            window.location.href = serverUrl+"/reportController/export_reportList.json?param={pagenumber:"+currentpage+",pagecount:15}";
        },
        render: function () {
            {
                var svar = this;
                var Tabels = this.state.tableData.map(function (data) {
                    return (
                            <Table key={data.key} schoolname={data.schoolname} studentname={data.studentname} simid={data.simid} mdtid={data.mdtid} devicetype={data.devicetype} factory={data.factory}
                                   teachertel={data.teachertel} parenttel=  {data.parenttel} starttime={data.starttime} endtime={data.endtime} updatetime={data.updatetime} fee={data.fee} fee2={data.fee2} paystatus={data.paystatus} />
                    )
                })
            }
            return (
                    <div>
                        <div className="details-page ">
                            <div className="statistical-analysis tableInfo">
                                <div className="statistical-analysis-top">
                                    <div className="statistical-analysis-top-left">
                                        <div className="statistical-analysis-top-left-title">缴费明细表</div>
                                        <div className="statistical-analysis-top-left-text">
                                            <img src="../img/icon/annotations.png" />
                                            <span></span>
                                            <div>这里是注释。</div>
                                        </div>
                                    </div>
                                    <div className="statistical-analysis-top-right-button">
                                        <a href="javascript:history.back();" className="header-right-return">
                                            <img src="../img/icon/return.png" />
                                            返回
                                        </a>
                                        <div className="export" onClick={this.onClickExport}>
                                            <span className="export-img">
                                                <img src="../img/icon/export.png" />
                                            </span>
                                            <span className="export-text">导出excel</span>
                                        </div>
                                    </div>
                                </div>
                                <div className="statistical-analysis-content studentsInfo-data-table">
                                    <table>
                                        <thead>
                                            <th>学校</th>
                                            <th>学生</th>
                                            <th>设备手机号</th>
                                            <th>设备号</th>
                                            <th>设备类型</th>
                                            <th>生产商</th>
                                            <th>班主任手机号</th>
                                            <th>监护人手机号</th>
                                            <th>激活日期</th>
                                            <th>设备有效期</th>
                                            <th>缴费时间</th>
                                            <th>推广价</th>
                                            <th>缴费金额</th>
                                            <th>缴费状态</th>
                                        </thead>
                                        <tbody>
                                            {Tabels}
                                        </tbody>
                                    </table>
                                </div>
                                <Page otherData={this.state.otherData} onPageClick={this.onPageClick} />
                            </div>
                            <footer id="copyright">
                                <span><img src="../img/icon/copyright.png"/>Copyright 2015 杭州随寻科技有限公司 </span>
                            </footer>
                        </div>
                    </div>
            )
        }
    });
    ReactDOM.render(
        <Main  otherData={otherData} tableData={tableData} ></Main>,
        document.getElementById('tableManage')
    );
    $(function () {
//        $(".studentsInfo-data-table").css("maxHeight",$(document.body).height()-260+"px");//直接先计算然后在虚拟dom中设置
    });
</script>
</body>
</html>